﻿@model Web.Models.TagDto

@{
    ViewBag.Title = "Graph Tag Data";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Details of @Html.ValueFor(m => m.Name)</h2>
<br />
<fieldset>
@Html.LabelFor(m => m.Id)
@Html.ValueFor(m => m.Id)

@Html.LabelFor(m => m.Name)
@Html.ValueFor(m => m.Name)

            @Html.Label("Parent Tag")
    <p>@(ViewBag.Parent ?? "No parent")</p>

@Html.LabelFor(m => m.Guid)
@Html.ValueFor(m => m.Guid)
    
</fieldset>

<div id="chart_div"></div>
<p> Last updated at : <span id="last-update"></span></p>

@section scripts
{
        <script type="text/javascript">

        $(document).ready(function() {
            var r = {
                initialize: function (me) {
                    google.load('visualization', '1', { packages: ['gauge'], "callback": drawChart });
                    function drawChart() {
                        me.data = google.visualization.arrayToDataTable([
                       ['Label', 'Value'],
                       ['@Model.Name', 0]
                        ]);

                        me.options = {
                            width: 200, height: 200,
                            redFrom: 90, redTo: 100,
                            yellowFrom: 75, yellowTo: 90,
                            minorTicks: 5
                        };

                        me.bounds = {
                            min: 0,
                            max: 100
                        };

                        me.chart = new google.visualization.Gauge(document.getElementById('chart_div'));
                        me.chart.draw(me.data, me.options);
                    }
                },

                redraw: function (me) {
                    me.options = {
                        width: me.options.width, height: me.options.height,
                        redFrom: me.bounds.max * 0.9, redTo: me.bounds.max,
                        yellowFrom: me.bounds.max * 0.75, yellowTo: me.bounds.max * 0.9,
                        max : Math.round(me.bounds.max),
                        min : Math.round(me.bounds.min),
                        minorTicks: 5
                    };
                    me.chart.draw(me.data, me.options);
                }
            };
            r.initialize(r);

            $.connection.hub.logging = true;
            var hub = $.connection.broadcastHub;
            function connectionReady() {
                console.log("connected to SingalR");
            }

            hub.client.updateDouble = function (tagId, times, value) {
                if (!r.bounds) {
                    return;
                }
                if (tagId === '@Model.Guid') {
                    if (r.bounds.min > value) {
                        r.bounds.min = value;
                    }
                    if (r.bounds.max < value) {
                        r.bounds.max = value;
                    }

                    var v = value.toFixed(2) * 1;
                    r.data.setValue(0, 1, v);
                    r.redraw(r);
                    $("#last-update").text(times);
                }
            };

            $.connection.hub.error(function() {
                alert("Error connecting to the server");
            });

            $.connection.hub.start()
                .done(connectionReady)
                .fail(function () { console.log("Could not Connect!"); });
        })
    </script>
}
